import { Component, Vue } from 'vue-property-decorator'
import { State, Mutation, Action } from 'vuex-class'
import { RootState } from '@/store'
import { desensitization } from '@/lib/utils'
import style from '@/views/NewApply/ApplyDetail.less'
import styles from './BindDingUser.less'
@Component({})
export default class BindDingUser extends Vue {
  @State((state: RootState) => state.user.bindDingUserVisible)
  private visible!: string
  @State((state: RootState) => state.user.accountMobile)
  private mobile!: string

  // @S
  @Action('user/queryDingAccountByMobile')
  private queryDingAccountByMobile!: any
  @Action('user/bindingDingAccount') private bindingDingAccount!: any
  @Action('user/info') private info!: any

  @Mutation('user/setStateData') private setStateData!: any

  private dingUserId: string = ''
  private userList: any[] = []
  private loading: boolean = false
  private noDingUserId: boolean = false // 是否包含dingUserID不存在现象

  protected render(h: any) {
    return (
      <div
        class={{ [style.sealDetail]: true, [styles.dialog]: this.noDingUserId }}
      >
        <el-dialog
          title="绑定"
          custom-class="custom-dialog"
          width={this.noDingUserId ? `1100px` : `500px`}
          visible={this.visible}
          close-on-click-modal={false}
          close-on-press-escape={false}
          {...{
            on: {
              'update:visible': this.visibleChange,
              open: this.open,
              closed: this.closed,
            },
          }}
        >
          <div class={styles.content}>
            <p class={styles.title}>
              验证绑定手机号{desensitization(this.mobile)}
            </p>
            <p class={styles.tips}>
              {this.userList &&
                this.userList.length > 0 &&
                '请核对并选择下方正确的用户姓名进行绑定'}
            </p>
            <div class={styles.list}>
              {this.userList && this.userList.length > 0 ? (
                this.userList.map((item: any) => {
                  return (
                    <span class={{ [styles.inLine]: !item.dingUserId }}>
                      {!item.dingUserId && <br />}
                      <el-radio
                        v-model={this.dingUserId}
                        label={item.dingUserId}
                        disabled={!item.dingUserId}
                        border
                      >
                        {item.name}
                      </el-radio>
                      {!item.dingUserId && (
                        <p>
                          <i class="el-icon-info" />
                          该账号未在浙江省统一用户中心注册与绑定，请按
                          <span>流程指引</span>
                          完成操作后再提交（数据同步需1个工作日完成）
                        </p>
                      )}
                      {!item.dingUserId && <br />}
                    </span>
                  )
                })
              ) : (
                <p class={styles.error} v-loading={this.loading}>
                  {this.loading
                    ? ''
                    : '当前手机号暂未开通浙政钉，请注册开通后完成绑定。'}
                </p>
              )}
            </div>
            {this.noDingUserId && (
              <div class="mt20">
                <img
                  src={require('@/assets/rectangle.png')}
                  alt=""
                  width="1049px"
                  height="315px"
                />
                <p class="tc">
                  <el-button type="text" class="f16" onClick={this.toZJCA}>
                    点击跳转
                  </el-button>
                </p>
              </div>
            )}
          </div>
          <div slot="footer">
            <el-button
              onClick={() => {
                this.visibleChange(false)
              }}
            >
              取消
            </el-button>
            {this.userList && this.userList.length > 0 && (
              <el-button
                type="primary"
                disabled={!this.dingUserId}
                onClick={this.submit}
                loading={this.loading}
              >
                提交
              </el-button>
            )}
          </div>
        </el-dialog>
      </div>
    )
  }
  private visibleChange(val: boolean) {
    this.setStateData({ bindDingUserVisible: val })
  }
  private open() {
    this.dingUserId = ''
    this.loading = true
    this.userList = []
    this.queryDingAccountByMobile(this.mobile)
      .then((res: any) => {
        this.loading = false
        this.userList = res.data || []
        this.dingUserId = (this.userList[0] || {}).dingUserId || ''
        this.noDingUserId =
          this.userList.findIndex((user: any) => !user.dingUserId) !== -1
      })
      .catch((e: any) => {
        this.loading = false
        if ((e || {}).errorCode === 'LOGIN_INVALID') {
          this.visibleChange(false)
        }
      })
  }
  private async submit() {
    this.loading = true
    await this.bindingDingAccount(this.dingUserId)
      .then(() => {
        this.visibleChange(false)
        this.$message.success('绑定成功')
        this.info()
      })
      .catch(() => {
        this.loading = false
      })
  }

  private closed() {
    this.loading = false
  }

  private toZJCA() {
    window.open('https://sso.ding.zj.gov.cn/frontend/login#/login', '_blank')
  }
}
